<template>
  <uni-popup ref="fillState" type="center" :is-mask-click="false">
    <view class="fillState">
      <view style="margin-bottom: 20rpx;">加注状态</view>
      <view class="space-between state">
        <view v-for="item in list" :key='item.name' :class="state===item.value?'active':''"
          @click="changeState(item.value)">
          {{item.name}}
        </view>
       
      </view>
      <view class="jiaview" v-if="state==10">
        <input class="uni-input"  placeholder="请输入加注量" v-model="amount" />
      </view>
      <Button @cancel="closeBankPad" @confirm="submit()" style="margin-top:20rpx"></Button>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import Button from './buttom.vue';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { ref } from 'vue';
  import { toPublish } from '@mqtt';
  const emit = defineEmits(['submit']);
  const props = defineProps({
    fillID: { type: String },
  });
  const fillState = ref(null)
  const amount = ref('')
  const list = [{ name: '加注完成', value: 3 }, { name: '挂枪结束', value: 7 },
  { name: '取消加注', value: 4 },{ name: '异常订单', value: 10 }]
  const state = ref()
  function changeState(name : string) {
    state.value = name
    // console.log(state.value)
    if(state.value != 10){
      //显示输入框
      amount.value = ''
    }
  }
  function submit() {
    closeBankPad()
    if (!state.value) {
      errorToast('请选择加注状态')
    } else {
      const payload = {
        order_id: Number(props.fillID),
        fill_status: state.value,
        amount:amount.value
      }
      showLoading()
      toPublish('control/editFillstatus', payload, (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          setTimeout(() => {
            emit('submit')
          }, 1000)
          amount.value = ''
        } else {
          errorToast(msg)
        }
      });
    }
  }
  // 开关修改加注状态弹框
  function openBankPad() {
    state.value = '';
    fillState.value.open();
  }
  function closeBankPad() {
    fillState.value.close();
  }
  defineExpose({ openBankPad });
</script>

<style scoped lang="less">
  .fillState {
    width: 650rpx;
    background-color: white;
    border-radius: 5px;
    padding: 30rpx 30rpx 40rpx 30rpx;
    box-sizing: border-box;
  }

  .state {
    flex-wrap: wrap;

    view {
      width: 182rpx;
      height: 56rpx;
      border-radius: 5px;
      text-align: center;
      line-height: 56rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      background: #F6F8FC;
      color: #333;
    }

    .active {
      border: 1px solid #2694FB;
      color: #2A95FA;
    }
  }
  .jiaview{
    padding: 10rpx 20rpx;
    // background-color: #eee;
    border: 1rpx solid #eee;
    border-radius: 20rpx;
    margin: 20rpx 0 40rpx;
    font-size: 28rpx;
  }
</style>